<html>

<head>
    <title>grapecity_spreadJS_demo</title>
    <script src="jquery_3.1.1.min.js" type="text/javascript"></script>
    <link rel="stylesheet" href="gc.spread.sheets.excel2013white.14.2.2.css" type="text/css">
    <script src="gc.spread.sheets.all.14.2.2.min.js" type="text/javascript"></script>
    <script src="gc.spread.excelio.14.2.2.min.js" type="text/javascript"></script>
    <script src="https://cdn.grapecity.com.cn/spreadjs/scripts/FileSaver.min.js" type="text/javascript"></script>
    <script src="gc.spread.sheets.resources.zh.14.2.2.min.js" type="text/javascript"></script>
    <script src="gc.spread.sheets.print.14.2.2.min.js" type="text/javascript"></script>
    <script src="gc.spread.sheets.pdf.14.2.2.min.js" type="text/javascript"></script>
    <script src="gc.spread.sheets.charts.14.2.2.min.js" type="text/javascript"></script>
    <script src="v14.js" type="text/javascript"></script>
    <style type="text/css">
        p{
            color:#336699;
            text-align: center;
        }
        #ss {
            height: 440px;
        }
        
        .options-container {
            position: relative;
        }
        
        .option-row{
            position: absolute;
            width: 180px;
            padding: 12px;
            background: #e8e8e8;
            top: 124px;
            right: 20px;
            font-size:12px
        }
        
        input{
            padding: 2px 6px;
            margin: 4px;
        }
        input[type="button"]{
            border: none;
            background: #336699;
            border-radius: 4px;
            color: #fff;
        }
    </style>
</head>

<body>
    <p>多文件合并导入同一个WorkBook</p>
    <h6>多选文件，点击导入按钮后会将ActiveSheet合并到一个WorkBook</h6>
    <div class="sample-tutorial">
        <div class="option-row">
            <div class="inputContainer">
                <input type="file" id="fileDemo" class="input" multiple="“multiple”" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet">
                <input type="button" id="loadExcel" value="导入Excel" class="button">
            </div>
            <div class="inputContainer">
                <label>&nbsp;&nbsp;请输入导出文件名称：</label>
                <input id="exportFileName" value="export.xlsx" class="input">
                <input type="button" id="saveExcel" value="导出WorkBook" class="button">
                <input type="button" id="saveActiveSheet" value="导出ActiveSheet" class="button">
            </div>
        </div>

        <div id="ss"></div>

    </div>
    <script type="text/javascript">
        GC.Spread.Common.CultureManager.culture('zh-cn');
        $(document).ready(function() {
            var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), {
                sheetCount: 1
            });
        
            function importExcels(spread, index, files, count) {
                let file = files[index];
                let excelIo = new GC.Spread.Excel.IO();
                excelIo.open(file, function(json) {
                    var tempSpread = new GC.Spread.Sheets.Workbook();
                    tempSpread.fromJSON(json);
                    var activeSheetJSON = JSON.stringify(tempSpread.getActiveSheet().toJSON());
                    var tempSheet = new GC.Spread.Sheets.Worksheet();
                    tempSheet.fromJSON(JSON.parse(activeSheetJSON))
                    tempSheet.name("Sheet" + (index + 1));
                    spread.addSheet(spread.getSheetCount(), tempSheet);
                    if (index < count) {
                        importExcels(spread, index + 1, files, count);
                    }
                })
            }
            $("#loadExcel").click(function() {
        
                var excelFiles = document.getElementById("fileDemo").files;
                if (excelFiles.length > 0) {
                    spread.setSheetCount(0);
                    importExcels(spread, 0, excelFiles, excelFiles.length)
                        // for (var i = 0; i < excelFiles.length; i++) {
                        //     importExcel(spread, i, excelFiles[i], excelFiles.length)
                        // }
                }
        
            });
        
            $("#saveExcel").click(function() {
                var fileName = $("#exportFileName").val();
                if (fileName.substr(-5, 5) !== '.xlsx') {
                    fileName += '.xlsx';
                }
                var json = spread.toJSON();
                let excelIo = new GC.Spread.Excel.IO();
                // here is excel IO API
                excelIo.save(json, function(blob) {
                    saveAs(blob, fileName);
                }, function(e) {
                    // process error
                });
            });
            $("#saveActiveSheet").click(function() {
                var fileName = $("#exportFileName").val();
                if (fileName.substr(-5, 5) !== '.xlsx') {
                    fileName += '.xlsx';
                }
                var json = JSON.stringify(spread.toJSON());
        
                var tempSpread = new GC.Spread.Sheets.Workbook();
                tempSpread.fromJSON(JSON.parse(json));
                var index = tempSpread.getActiveSheetIndex();
                for (var i = tempSpread.getSheetCount() - 1; i > index; i--) {
                    tempSpread.removeSheet(i);
                }
                for (var i = 0; i < index; i++) {
                    tempSpread.removeSheet(0);
                }
                json = tempSpread.toJSON();
        
                let excelIo = new GC.Spread.Excel.IO();
                // here is excel IO API
                excelIo.save(json, function(blob) {
                    saveAs(blob, fileName);
                }, function(e) {
                    // process error
                });
            });
        });
    </script>
</body>

</html>